<template>
  <view class="tabs">
    <text class="tab" :class="{ active: active == item.value }" v-for="item in tabs" :key="item.value"
      @click="change(item)">
      {{ item.label }}
    </text>
  </view>
  <u-calendar :show="show" mode="range" @confirm="confirm" @close="close"></u-calendar>
</template>
<script setup>
import uCalendar from "@/uni_modules/uview-plus/components/u-calendar/u-calendar.vue";
import { ref, defineEmits } from 'vue'
defineProps({
  tabs: {
    type: Array,
    default: []
  },
  active: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['change', 'customDate'])
const show = ref(false);
const mode = ref('range');

function change (item) {
  emit('change', item)
  if (item.value === 5 && item.label === '自定义') {
    show.value = true
  }
}

function confirm (val) {
  emit('customDate', val[0], val[val.length - 1])
  show.value = false
}
function close () {
  show.value = false
}
</script>
<style lang="scss" scoped>
.tabs {
  .tab {
    font-weight: 500;
    font-size: 24rpx;
    color: #666666;
    line-height: 28rpx;
    padding: 12rpx 0;
    position: relative;
  }

  .tab.active {
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    line-height: 35rpx;

    &::after {
      content: "";
      width: 40rpx;
      height: 6rpx;
      border-radius: 50rpx;
      background-color: #58DBCF;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .tab+.tab {
    margin-left: 42rpx;
  }
}

:deep(.u-calendar-header__subtitle),
:deep(.u-calendar-header__title),
:deep(.u-calendar-month__title) {
  display: block;
}
</style>